<!---
 @Name: index.vue
 @Author: lhf
 @Owner:
 @Date: 2025-07-15 15:20:27
 @LastEditTime: 2025-07-15 15:20:27
 @LastEditors:lhf
 @Description:  医院信息
 @Version:
 @FilePath: src\views\column\index.vue
--->

<template>
  <div class="footer" v-show="show">
    <div class="foot">
      <span class="icon-home" @click="routeTo('home')">首页</span>
      <span class="icon-back" @click="routeTo('back')">返回</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'BeseColumn',
  props: {
    programId: String
  },
  components: {},
  data() {
    return {};
  },
  computed: {
    show() {
      return this.$store.state.footer;
    }
  },
  mounted() {},
  methods: {
    routeTo(mode) {
      this.$emit('setComponent', {
        mode: mode,
        type: 'system'
      });
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 99999;
  .foot {
    display: inline-block;
    vertical-align: top;
    border-radius: 20px 20px 0 0;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.8);
    span {
      font-weight: 400;
      font-size: 36px;
      color: #fff;
      display: inline-block;
      vertical-align: top;
      background: url('@/assets/images/fa-home.png') no-repeat left 25px center;
      background-size: 66px;
      width: 210px;
      padding-left: 100px;
      padding-right: 25px;
      text-align: left;
      &.icon-back {
        background-image: url('@/assets/images/fa-back.png');
        position: relative;
        &:before {
          display: table;
          content: '';
          width: 2px;
          height: 40px;
          background: #fff;
          position: absolute;
          left: 0;
          top: 20px;
        }
      }
    }
  }
}
</style>
